<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>项目管理</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <!--<link rel="stylesheet" href="../../lib/zTree/css/metroStyle/metroStyle.css">-->
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.min.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <!--<script type="text/javascript"  src="../../static/js/MD5/Base64.js"></script>-->
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>


    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,body,#app,.el-container{
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
        .el-main{
            padding: 4px;
        }
        .el-cascader-menu__wrap{
            min-height:300px
        }
        .el-select{
            display:block;
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-main>
        <el-form :inline="true" :model="queryData" ref="queryData" label-width="50px" label-position="right" size="small" style="height: 40px;border: 1px solid #e8eaec;">
            <el-form-item label="工号">
                <el-input v-model="queryData.userCode" placeholder="请输入工号"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="queryData.userName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchEvent('queryData',1)">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh-right" @click="searchEvent('queryData',0)">重置</el-button>
            </el-form-item>
        </el-form>

        <vxe-grid
                border
                stripe
                ref="xGrid"
                resizable
                show-overflow
                highlight-current-row="true"
                keep-source
                :checkbox-config="tableCheckBox"
                :pager-config="tablePage"
                :proxy-config="tableProxy"
                header-align="center"
                align="center"
                :height="tableHeight">
            <vxe-table-column type="checkbox" width="10%" header-align="center" align="center"></vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="10%" header-align="center" align="center"></vxe-table-column>
            <vxe-table-column field="userCode" title="工号" width="40%" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="userName" title="姓名" width="40%" headerAlign="center" align="center"></vxe-table-column>
        </vxe-grid>
        <el-row style="text-align:center;margin-top:10px;">
            <el-button type="primary" icon="el-icon-position" @click="submitEvent()">确定</el-button>
            <el-button type="warning" icon="el-icon-refresh-right" @click="closeEvent()">取消</el-button>
        </el-row>

    </el-main>
</el-container>
</body>
<script type="text/javascript">
    var layIndex = parent.layer.getFrameIndex(window.name);
    var isMult = Tool.getParam("isMult");
    var flag = Tool.getParam("flag");
    var excludeUserIds = Tool.getParam("excludeUserIds");
    window.onload = function () {
        var main =  {
            data () {
                return {
                    loading:false,
                    disabled:false,
                    visible:false,
                    statusOptions:[],
                    statusFormOptions:[],
                    tableHeight:"490px",
                    tablePage:{
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 15,
                        align: 'left',
                        pageSizes: [15, 30, 45, 60, 75, 90],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
                    },
                    tableProxy:{
                        props:{
                            result:'data.rows',
                            total:'data.total'
                        },
                        ajax:{
                            // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
                            query:({ page, sort, filters }) => {
                                // 处理排序条件
                                let queryParams = Object.assign({
                                    sort:sort.property,
                                    order:sort.order,
                                    excludeUserIds:excludeUserIds
                                }, this.queryData);
                                // 处理筛选条件
                                filters.forEach(({ column, property, values }) => {
                                    queryParams[property] = values.join(',')
                                });
                                //console.info(queryParams);
                                return XEAjax.get(`${curl}/user/getWinUserList?currentPage=${page.currentPage}&pageSize=${page.pageSize}`, queryParams);
                            }
                        }
                    },
                    tableCheckBox:{
                        trigger :'row'
                    },
                    submitLoading:false,
                    selectRow:null,
                    showEdit:false,
                    queryData:{
                        userCode:'',
                        userName:''
                    }
                }
            },
            created () {

            },
            mounted () {

            },
            methods:{
                searchEvent (formName,acType) {
                    if(acType==0){
                        this.queryData = {
                            projName:"",
                            status:""
                        }
                        //this.$refs[formName].resetFields();
                    }
                    this.$refs.xGrid.commitProxy('reload');
                },
                submitEvent () {
                    var rows = this.$refs.xGrid.getCheckboxRecords();
                    if(isMult=="1"){
                        if(rows.length==0){
                            this.$XModal.message({ message:'请选择用户记录', status:'error' });
                            return false;
                        }
                    }else{
                        if(rows.length>1){
                            this.$XModal.message({ message:'请选择一条用户记录', status:'error' });
                            return false;
                        }
                    }
                    parent.parentSetUser(rows,flag);
                    parent.layer.close(layIndex);
                },
                closeEvent(){
                    parent.layer.close(layIndex);
                }
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>
</html>
